<template>
    <div class="page">
      <div class="user-add">
        <el-row type="flex"  justify="center">
          <el-col :span="8">
            <div  class="img-upload" >
              <div class="img-upload-div">
                <b>照片:</b>
              </div>
              <div class="img-upload-div">
                <el-upload
                  class="avatar-uploader"
                  :action="baseURL+'/ImgUpload/upload'"
                  :show-file-list="false"
                  :http-request="httpUpload"
                  :on-change="fileChange"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>

              </div>

            </div>
            <div  class="img-url"  :title="imageUploadPath" style="cursor:pointer;">
              <div class="img-upload-div" style="visibility: hidden">
                <!-- 用来占位 -->
                <span>照片:</span>
              </div>
              <div  class="img-url-span">
                 {{ imageUploadPath }}
              </div>
            </div>
            <div>
              <div class="item">
                <div class="item-div">
                  <b>姓名:</b>
                </div>
                <div class="item-div">
                  <!-- <el-input v-model="input" placeholder="请输入内容"></el-input>-->
                  <el-input v-model="userName" placeholder="请输入姓名"></el-input>
                </div>
              </div>
            </div>
            <div>
              <div class="item">
                <div class="item-div">
                  <b>昵称:</b>
                </div>
                <div class="item-div">
                  <el-input v-model="nickName" placeholder="请输入昵称"></el-input>
                </div>
              </div>
            </div>
            <div>
              <div class="item">
                <div class="item-div">
                  <b>性别:</b>
                </div>
                <div class="item-div">
                  <el-radio-group v-model="gender">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">女</el-radio>
                  </el-radio-group>
                </div>
              </div>
            </div>
            <div>
              <div class="item">
                <div class="item-div">
                  <b>生日:</b>
                </div>
                <div class="item-div">
                  <el-date-picker
                    v-model="birthday"
                    type="date"
                    placeholder="选择生日">
                  </el-date-picker>
                </div>
              </div>
            </div>
            <div>
              <div class="item">
                <div class="item-div">
                  <b>宿舍:</b>
                </div>
                <div class="item-div">
                  <el-select v-model="dormitory" placeholder="请选择宿舍">
                    <el-option
                      v-for="item in dormitoryList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              <div class="item">
                <div class="item-div">
                  <b>班级:</b>
                </div>
                <div class="item-div">
                  <el-select v-model="className" placeholder="请选择班级">
                    <el-option
                      v-for="item in classList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
            </div>
            <div>
              <div class="item">
                <div class="item-div">
                  <b>分组:</b>
                </div>
                <div class="item-div">
                  <el-select v-model="groupName" placeholder="请选择分组">
                    <el-option
                      v-for="item in groupList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
            </div>
            <div>
              <div class="item">
                <div class="item-div">
                  <b>电话:</b>
                </div>
                <div class="item-div">
                  <el-input v-model="telephone"  placeholder="请输入电话"></el-input>
                </div>
              </div>
            </div>
            <div>
              <div class="item">
                <div class="item-div">
                  <b>邮箱:</b>
                </div>
                <div class="item-div">
                  <el-input v-model="email"    placeholder="请输入邮箱"></el-input>
                </div>
              </div>
            </div>
            <div>
              <div class="item">
                <div class="item-div">
                  <b>微信:</b>
                </div>
                <div class="item-div">
                  <el-input v-model="wechat"   placeholder="请输入微信"></el-input>
                </div>
              </div>
            </div>
            <div>
              <div class="item-textarea">
                <div class="item-textarea-div">
                  <b>备注:</b>
                </div>
                <div class="item-textarea-div">
                  <el-input  v-model="remarks" class="input-textarea" :rows="5" type="textarea"  placeholder="请输入备注"></el-input>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="user-add-button">
        <el-row type="flex"  justify="center">
          <el-col :span="4">
            <div style="width: 100%; text-align: right; margin-right: 10px">
              <el-button @click="clearData">取消</el-button>
            </div>
          </el-col>
          <el-col :span="4">
            <div style="width: 100%; text-align: left;  margin-left: 10px">
              <el-button @click="saveUser" type="primary">保存</el-button>
            </div>
          </el-col>
        </el-row>
      </div>

    </div>
</template>

<script>
import {fileUpload, getClassListByGet, getDormitoryListByGet, getGroupListByGet} from '../../config/index';

  // 添加学生信息, 选择所属班级, 组, 宿舍, 图片上传
    export default {
      data() {
        return {
          file: '',
          imageUrl: '',
          baseURL:'',
          imageUploadPath: "",
          userName: "", // 用户名
          nickName: "", // 昵称
          gender: "", // 1:男   2:女
          telephone: "",// 电话
          email: "", // 邮箱
          wechat: "", // 微信号
          remarks: "", // 个人备注
          birthday: "", // 生日
          dormitory: "", //  宿舍
          className: "", // 班级
          groupName: "", // 分组
          dormitoryList: [// { value: '宿舍id', label: '宿舍名' }
          ],
          classList: [ // { value: '班级id', label: '班级名'}
          ],
          groupList: [  // {value: '组id', label: '组名'}
          ],
        };
      },
      mounted(){
        this.baseURL = this.$baseURL
        this.getClassList();
        this.getDormitoryList();
        this.getGroupList();
      },
      methods: {
        clearData(){ // 清空数据
          this.file = '';
          this.imageUrl = '';
          this.imageUploadPath = "";
          this.userName = ""; // 用户名
          this.nickName = ""; // 昵称
          this.gender = ""; // 1:男   2:女
          this.telephone = "";// 电话
          this.email = ""; // 邮箱
          this.wechat = ""; // 微信号
          this.remarks = ""; // 个人备注
          this.birthday = ""; // 生日
          this.dormitory = ""; //  宿舍
          this.className = ""; // 班级
          this.groupName = ""; // 分组
          // this.dormitoryList = [ ];
          // this.classList = [ ];
          // this.groupList = [ ];
        },
        saveUser(){
          // this.imageUploadPath = "";
          // this.userName = ""; // 用户名
          // this.nickName = ""; // 昵称
          // this.gender = ""; // 1:男   2:女
          // this.telephone = "";// 电话
          // this.email = ""; // 邮箱
          // this.wechat = ""; // 微信号
          // this.remarks = ""; // 个人备注
          // this.birthday = ""; // 生日
          // this.dormitory = ""; //  宿舍
          // this.className = ""; // 班级
          // this.groupName = ""; // 分组
        },
        getGroupList(){
          var _this = this;
          // 获取分组列表
          var res = getGroupListByGet();
          res.then((res)=>{
            if(res.status == 200){
              // 把新分组列表, 赋值给 tableData
              var list = res.data;
              this.groupList = list.map((item) => ({
                value: item.id,
                label: item.groupName
              }))
            }
          }).catch((e)=>{
            console.log("getGroupListByGet: 失败",e);
          })
        },
        getDormitoryList(){
          var _this = this;
          // 获取宿舍列表
          var res = getDormitoryListByGet();
          res.then((res)=>{
            if(res.status == 200){
              // 新宿舍列表
              var list = res.data;
              this.dormitoryList = list.map((item) => ({
                value: item.id,
                label: item.dormitoryName
              }))
            }
          }).catch((e)=>{
            console.log("getDormitoryListByGet: 失败",e);
          })
        },
        getClassList(){
          var _this = this;
          // 获取班级列表
          var res = getClassListByGet();
          res.then((res)=>{
            if(res.status == 200){
              // 新班级列表
              var list = res.data;
              this.classList = list.map((item) => ({
                value: item.id,
                label: item.className
              }))
            }
          }).catch((e)=>{
            console.log("getClassList: 失败",e);
          })
        },
        httpUpload() {
          var _this = this

          const reader = new FileReader()
          reader.readAsDataURL(_this.file.raw)
          reader.addEventListener('load', () => {
            var imgBase64 = reader.result
            imgBase64 = imgBase64.replace('data:image/jpeg;base64,', '');
            // 图片上传
            var res = fileUpload({
              "imgBase64": imgBase64,
              "fileName": _this.file.name
            });
            res.then((res)=>{
              console.log("xxx", res)

              if(res.status == 200){
                // 图片回显
                _this.imageUrl = URL.createObjectURL(this.file.raw);
                // 图片URL回显
                _this.imageUploadPath = this.$baseURL + "/" + res.data;
                // 信息提示
                var notify = this.$notify({
                  title: 'upload',
                  message: "图片上传成功"
                });
                setTimeout(()=>{
                  notify.close()
                }, 1000)
              }
            }).catch((e)=>{
              console.log("fileUpload: 失败",e);
            })
          })
        },
        handleAvatarSuccess(res, file) {
          // this.imageUrl = URL.createObjectURL(file.raw);
        },
        fileChange(file) {
          this.file = file
        },
        beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024  < 300;

          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 300k!');
          }
          return isJPG && isLt2M;
        }
      }
    }
</script>

<style scoped>
.page{
  width: 100%;
  height: 100%;
  padding-top: 1px ;
}
.user-add{
  padding: 40px 40px;
  height: 480px;
  background: white;
}
.user-add-button{
  background: white;
}
.img-upload{
  height: 153px;

}
.img-upload-div{
  float: left;
  margin-right: 10px;
  height: 100%;
}
.item{
  height: 60px;
  line-height: 60px;
}
.item-div{
  float: left;
  margin-right: 10px;
  height: 100%;
}
.item-textarea{
  height: 30px;
  line-height: 30px;
}
.item-textarea-div{
  float: left;
  margin-right: 10px;
}
.input-textarea{
  width: 380px;
}

/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
.img-url{
  height: 22px;
}
.img-url-span{
  width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

</style>
